프론트엔드 개발을 위한 자바스크립트 (feat. VanillaJS) 후기

프로그래머스에서 운영하는 프런트엔드 개발을 위한 자바스크립트 온라인 스터디에 참여하게 되었고 그 후기를 남겨보려고 합니다.

프런트엔드 개발을 위한 자바스크립트 스터디 링크

일단 제가 스터디를 신청하게 된 이유는 명확했습니다. 평소에 react만 공부하다 보니 라이브러리나 프레임워크 없이 javaScript 만으로 코드를 작성하는 것이 익숙하지 않았고, 좋은 프런트엔드 개발자가 되기 위해 더욱 기본에 충실하고 싶었기 때문입니다.

실제로 저는 돔, 비동기, 자바스크립트 등에 대한 지식이 많이 부족했습니다. 지금이야 어느 정도 기본은 공부했다고 생각하지만 해당 스터디나 관련된 책을 읽기 전에는 ”가볍게 읽어본 적이 있다” 정도였습니다.

그리고 기본을 어떻게 학습하는 게 좋을까 찾아보던 도중 스터디가 있는 것을 발견하고 스터디를 참여하게 된다면, 저에게 분명히 좋은 기회가 될 것이라고 확신했습니다.

그래서 빠르게 신청했습니다.

1. 학습 내용

해당 스터디의 커리큘럼은 이렇습니다.

Chapter 1

첫 번째 미션: ES6 문법을 활용해 JS로 한 페이지(SPA)에서 동작하는 TodoApp 만들기

• ✅ JS를 활용해 화면 컴포넌트를 직접 만들기
• ✅ 헷갈리는 this 제대로 활용하는 법
• ✅ Closure, Context

Chapter 2

두 번째 미션: TodoApp 기능 강화해주기

• ✅ addEventListner, removeEventListner
• ✅ 이벤트가 복잡해질 때 꼭 알아야 할 Bubbling, Capturing
• ✅ Event Deligation
• ✅ Custom Event

Chapter 3

세 번째 미션: 비동기적 처리를 위한 움짤 검색기 제작

• ✅ fetch API를 이용해, 짤봇 API와 연동하여 각종 움짤 모셔오기
• ✅ 모셔온 움짤들을 비동기적으로 화면에 그려주기
• ✅ fetch, Promise, await
• ✅ callback 방식에 대한 이해

Chapter 4

마지막 미션: 미니 트렐로(Trello) 만들기

• ✅ 드래그를 통한 상태 변경, 투두 내용 추가/수정/삭제 등 트렐로 기본 기능 구현
• ✅ 1주차에 배운 JS로 컴포넌트 그리기, 2주차의 비동기 처리, 3주차의 Event 처리 기법 등을 모두 활용한다.
• ✅ 보너스 미션! 직접 서버에 Todo 내용을 전달하는 기능 구현하기

Chapter 5

클로징 세션

• ✅ 어려웠던 문제들 마지막으로 함께 풀어보기
• ✅ 프론트엔드 취업과 관련한 자유로운 질문
• ✅ 다시 한 번 같이 풀어봤으면 하는 문제 등 공유하며 마무리

해당 미션들은 자신이 얼마나 시간을 투자하느냐에 따라 가져갈 수 있는 정도가 달라진다고 생각합니다. 다른 사람의 코드를 참고하는 것도 하나의 공부 방법이지만, 먼저 내가 생각하는 것을 그리고 다른 사람의 코드와 비교해 보는 게 내가 이번 스터디에서 최대한 성장 위한 최선의 방법이라고 생각했습니다.

실제로 미션에 6시간 정도를 2~3일을 투자한 적도 있었고, 다른 사람의 코드를 리뷰하려고 내가 작성한 코드와 비교해 보곤 했습니다.

2. 과제 or 코드리뷰

매주 새로운 과제가 나오고, 과제를 제출하면 다 같이 코드 리뷰를 진행하고 정해진 날에 zoom으로 세션을 가지는 방식입니다.

코드를 꼼꼼하게 봐주시는 게 인상적이었습니다. 실제로 변수명에 오타가 있었고 그 리뷰를 달아주셨는데, 하나하나 꼼꼼하게 보신다는 느낌을 받았습니다.

그리고 리뷰에서 말고 따로 필요한 질문이 있으면 스터디 측에서 운영하는 Slack에서 질문을 할 수 있었습니다.

제가 미션을 진행하면서 궁금했던 건 작은 이벤트가 발생할 때마다 서버 데이터를 업데이트해서 가져오는지? 아니면 업데이트를 클라이언트에만 저장해놓고 한 번에 업데이트할 때 가져오는지였습니다. 당연히 업데이트하는 데이터의 규모가 있을수록 위에 있는 방법은 피해야 한다고 생각했습니다.

댓글로 이런 식으로 제가 고민하고 있는 것에 대해서 질문할 수 있었고, 그에 맞는 답변을 듣고 진행하던 미션을 무리 없이 해결할 수 있었습니다.

3. 회고

• 코드 리뷰뿐만 아니라 미션을 하는 것만으로도 많은 성장을 할 수 있었다고 생각합니다. 미션 중에 컴포넌트를 분리하라는 미션이 있었는데, 이 미션을 처음 봤을 때는 어떻게 해야 할지 막막했던 기억이 있는데, 해당 미션이 끝나고 다음 미션에서는 당연한 듯이 컴포넌트를 분리하는 제 모습을 보게 되었던 것 같습니다.
• 해당 코드를 이렇게 작성하는 게 좋다 라기보단 어떠한 이유 때문에 작성했는지 물어보고, 그 문제를 해결하기 위해 어떤 것을 공부하는 게 좋은지를 알려주시는 게 좋았습니다.
• 실제로 같이 스터디를 진행한 사람들의 코드와 비교해 보면서 많이 배울 수 있었다고 생각합니다. 또한 서로에게 코드 리뷰를 해줄 수 있었는데, 역시 쉽지 않았습니다. 필자도 이번 스터디를 통해 다른 사람의 코드를 보면서 리뷰를 한 적이 몇 번 있는데, 다른 사람 코드를 리뷰를 하는 게 익숙하지 않다 보니 접근하는 게 어려웠던 기억이 있습니다. 그래도 이번 기회에 코드 리뷰를 경험해 봤다는 점에서 더욱 이번 스터디가 기억에 남을 것 같습니다.